<template>
	<div class="ShopCar">
		<header>
			<img src="~img/shopcar/return.png" @click="goBack()"/>
			<h1>购物车</h1>
		</header>
		<MenuBar></MenuBar>
		<ShopCarNone v-if='isShow'></ShopCarNone>
		<ShopCarHave v-else></ShopCarHave>
	</div>
</template>

<script>
	import ShopCarHave from './Components/ShopCarHave'
	import ShopCarNone from './Components/ShopCarNone'
	export default{
		components:{
			ShopCarHave,
			ShopCarNone,
		},
		data(){
			return{
				isShow:false
			}
		},
		methods:{
			goBack(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ShopCar{
		height: 100%;
	}
	.ShopCar header{
		width:100%;
		padding:0 40px;
		box-sizing:border-box;
		display: flex;
		background: #ff9900;
		height: 94px;
		align-items: center;
		position: relative;
	}
	.ShopCar header img{
		display: block;
		width:22px;
		height: 37px;
	}
	.ShopCar header h1{
		font-size:42px;
		color:#fff;
		position: absolute;
		left:320px;
	}
</style>